<template>
	<view class="order">
		<view>
			<view class="address-section">
				<view class="location" @click="site()">
					<view class="location_nav" v-for="(item,index) in location" :kye='index' v-if="item.defaultAddress==1">
						<view class="location_text" @click="deletes(item.id)">
							<view class="location_text1"><text>{{item.consignee}}</text>{{item.phone}}</view>
							<view style="font-size: 30upx;color: #CACACA;" class="location_text2"><text>{{item.province}} {{item.city}}{{item.county}}</text>{{item.address}}</view>
						</view>
						<view class="location_img" @click="address(item.id)">></view>
					</view>
				</view>
				<view class="address-image">
					<image src="../../static/dotted.png" mode=""></image>
				</view>
			</view>
			<view class="goods-section">
				<view class="goods-content" v-for="(item,index) in merchandise" :key='index'>
					<view class="goods-image">
						<image :src="item.spuImg" mode=""></image>
					</view>
					<view class="goods-name">
						<view style="font-size: 30upx;" class="goods-names">{{item.title}}</view>
						<view>
							<view>
								<view style="font-size: 25upx; color: #909399;">{{item.skuTitle}}</view>
								<view class="goods-text"><text>￥{{item.originalPrice/100}}</text>￥{{item.price/100}}<text class="addquantity">x    {{item.num}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="yt-list" @click="discountss()">
				<view class="yt-Name">
					<view class="yt-image">
						<image src="../../static/juan.png" mode=""></image><text>优惠卷</text>
					</view>
					<view class="yt-text"><text>选择优惠券</text></view>
				</view>
			</view>
			<view class="yt-lists">
				<view class="yt-lists-top">
					<view class="yt-lists-text">
							<text>商品金额</text>
							<view>￥{{totalPrice}}</view>
					</view>
					<view class="yt-lists-text">
						<text>折扣金额</text>
						<view style="color: #FA436A;">-￥{{Price}}</view>
					</view>
					<view class="yt-lists-text">
						<text>运费</text>
						<view>免运费</view>
					</view>
					<view class="yt-lists-Name">
						<text>备注</text>
						<view><input type="text" value="" placeholder="请填写备注信息" /></view>
					</view>
					<view class="footer">
						<view class="footer-content" v-for="(item,index) in merchandise" :key='index'>
							<view class="footer-Name">
								<text style="color: #000000;" >实付款</text>
								<text style="color:#FA436A;font-size: 35upx;">￥{{totalPrice-Price}}</text>
							</view>
							<view class="footer-Text" @click="pay(item,totalPrice,Price)"><text>提交订单</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mask_show" v-if="iscount">
			<view :class="!iscount==false?'mask':''" @click="mask()"></view>
			<scroll-view scroll-y="true" class="mask-content">
				<view class="coupon-item" v-for="(item,index) in addDiscount" :key='index'>
					<view class="con" @click="discounts(item.id)">
						<view class="con_left">
							<view class="con_leftTop">{{item.title}}</view>
							<view class="con_leftDottom">有效时间{{item.gmtEnd| timeStamp}}</view>
						</view>
						<view class="con_right">
							<view class="con_rightTop">¥{{item.discount/100}}</view>
							<view class="con_rightBottom">满{{item.min/100}}可用</view>
						</view>
						<view class="circle_l"></view>
						<view class="circle_r"></view>
					</view>
					<view class="tips">
						<view>全品类可用</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>	</view>
</template>

<script>
	export default {
		data() {
			return {
				iscount: false,
				location: [],
				addDiscount: [], //优惠卷
				details: [],
				id: '',
				Token: "",
				channel:'ios',
				merchandise:[]
			}
		},
		//计算价格
		computed: {
			totalPrice() {
				let totalPrice = 0
				this.merchandise.map(item => {
					console.log(item.originalPrice)
					return  totalPrice += item.num*item.originalPrice/100
				})
				return totalPrice.toFixed(1)
			},
			Price() {     
				let Price = 0
				this.merchandise.map(item => {
					return Price += item.originalPrice/100*item.num-item.price/100*item.num
				})
				return Price.toFixed(1)
			},
			
		},
		filters: {
					timeStamp: function(value) {
						if (!value) return '';
						var now = new Date(value);
						console.log("time:" + JSON.stringify(now));
						var year = now.getFullYear();
						var month = now.getMonth() + 1;
						if (month < 10) {
							month = '0' + month
						}
						var date = now.getDate();
						if (date < 10) {
							date = '0' + date
						}
						return year + "-" + month + "-" + date
					},
					timeStamp: function(value) {//具体到时分秒
						var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
						var year = date.getFullYear();
						var month = ("0" + (date.getMonth() + 1)).slice(-2);
						var sdate = ("0" + date.getDate()).slice(-2);
						var hour = ("0" + date.getHours()).slice(-2);
						var minute = ("0" + date.getMinutes()).slice(-2);
						var second = ("0" + date.getSeconds()).slice(-2);
						// 拼接
						var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute;
						// 返回
						return result;
					}
				},
		onLoad(e) {
			this.merchandise = JSON.parse(e.id)
			// 地址
			this.Token = uni.getStorageSync('Token')
			uni.request({
				url: this.$C.webUrl + 'm.api?_gp=address&_mt=getAllAddress',
				header: {
					'accessToken': this.Token
				},
				success: (res) => {
					this.location = res.data.data
					console.log(res)
				}
			})
			// 优惠卷
			uni.request({
				url: this.$C.webUrl + `m.api?_gp=coupon&_mt=getUserCoupons`,
				header: {
					'accessToken': this.Token
				},
				success: (res) => {
					console.log(res)
					if (res.data.errmsg == '成功') {
						this.addDiscount = res.data.data
					}
				}
			})
		},
		methods: {
			//支付
			pay(e,y,x) {
				console.log(e,y,x)
				var price=y-x
				console.log(e.originalPrice)
				console.log(e.price)
				var skuList = JSON.stringify({
					skuList: this.merchandise,
					totalOriginalPrice: e.originalPrice,
					totalPrice: e.price,
					mono: "",
					takeWay: "cart",
					freightPrice: 0,
					addressId: 395
				})
				console.log(skuList)
				console.log(skuList)
				uni.request({
					url: this.$C.webUrl + 'm.api?_gp=order&_mt=takeOrder',
					header: {
						'accessToken': this.Token
					},
					Method: 'POST',
					data: {
						orderRequest: skuList,
						channel: this.channel
					},
					success: (res) => {
						console.log(res)
						let data=res.data.data
						if(res.data.errmsg=='成功'){
							uni.navigateTo({
								url:`../pay/index?price=${price}&data=${data}`
							})
							uni.showToast({
							    title:'成功提交',
							    duration: 2000
							});
						}else{
							uni.showToast({
							    title: res.data.errmsg,
							    icon: "none",
							});
						}
					}
				})
			},
			discounts(id) {
				var skuList = JSON.stringify(this.merchandise)
				console.log(skuList)
				console.log(this.addDiscount)
				uni.request({
					url: this.$C.webUrl + `m.api?_gp=freight&_mt=getFreightMoney&orderRequestDTO=${skuList}`,
					header: {
						'accessToken': this.Token
					},
					success: (res) => {
						if (res.data.errmsg == '成功') {
							uni.showToast({
								title: '领取成功',
								duration: 3000
							})
						}
					}
				})
			},
			//遮罩层
			mask() {
				this.iscount = false
			},
			//优惠卷
			discountss() {
				this.iscount = true
			},
			// 地址
			site() {
				uni.navigateTo({
					url: '../list/index'
				})
			}
		}
	}
</script>

<style>
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.2;
	}
.addquantity{
	font-size: 13px;
	    color: #606266;
	    margin-left: 10px;
		text-decoration: none !important;
}
	.goods-names {
		width: 500upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*让文本强制在一行不换行*/
		text-overflow: ellipsis;

	}
	.mask-content {
		width: 90%;
		height: 100%;
		margin: auto;
	}

	.circle_l {
		width: 28upx;
		height: 28upx;
		border-radius: 50upx;
		background: #C2C2C2;
		left: -33upx;
		top: 88upx;
		position: absolute;
	}

	.circle_r {
		width: 28upx;
		height: 28upx;
		border-radius: 50upx;
		background: #C2C2C2;
		right: -33upx;
		top: 88upx;
		position: absolute;
	}

	.order {
		width: 100%;
	}

	.tips {
		font-size: 25upx;
		padding: 0px 20upx;
		color: #909399;
	}

	.con_rightTop {
		font-size: 40upx;
		color: #FA436A;
		margin: auto;
		text-align: center;
	}

	.con_rightBottom {
		font-size: 28upx;
		color: #606266;
		text-align: center;
	}

	.con_leftDottom {
		font-size: 25upx;
		color: #909399;
	}

	.con_leftTop {
		font-size: 33upx;
	}

	.con_left {
		width: 80%;
		line-height: 48upx;
	}

	.con_right {
		width: 25%;
	}

	.con {
		width: 95%;
		height: 100upx;
		position: relative;
		border-bottom: 1px dashed #919192;
		margin: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 20upx;
		background: #FFFFFF;
	}

	.coupon-item {
		width: 100%;
		height: 180upx;
		flex-wrap: wrap;
		display: flex;
		margin: 20upx 0px;
		background: #FFFFFF;
	}

	>>>.mask_show {
		width: 100%;
		height: 300upx;
		position: fixed;
		bottom: 0px;
		z-index: 9999 !important;
		background: #F0F9EB;
	}

	.footer-Name {
		margin-left: 30upx;

	}

	.footer-Text text {
		display: inline-block;
		text-align: center;
		margin: auto;
		color: #FFFFFF !important;
	}

	.footer-Text {
		width: 30%;
		height: 100%;
		background: #fa436a;
		vertical-align: middle;
		display: flex;
	}

	.footer-content {
		display: flex;
		line-height: 100upx;
		justify-content: space-between;
	}

	.footer {
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 0px;
		background: #F2F6FC;
	}

	.yt-lists-Name text {
		width: 100upx;
		margin-right: 30upx;
	}

	.yt-lists-Name {
		font-size: 30upx;
		margin: 20upx 20upx;
		display: flex;
	}

	.yt-lists-top text {
		width: 120upx;
		color: #C0C0C0;
	}


	.yt-lists-text {
		font-size: 30upx;
		margin: 40upx 20upx;
		display: flex;
		justify-content: space-between;
	}

	.yt-lists-top {
		font-size: 30upx;
	}

	.yt-lists {
		width: 100%;
	}

	.yt-text {
		font-size: 30upx;
		color: #fa436a;
	}

	.yt-Name image {
		width: 40upx;
		height: 40upx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10upx;
	}

	.yt-image {
		justify-content: space-between;
		vertical-align: middle;
		font-size: 30upx;
		color: #909399;
	}

	.yt-Name {
		text-align: center;
		padding: 0px 20upx;
		display: flex;
		justify-content: space-between;
		line-height: 80upx;
	}

	.yt-list {
		width: 100%;
		height: 80upx;
		border-bottom: 20upx solid #F2F6FC;
	}

	.goods-name {
		line-height: 50upx;
		margin-left: 20upx;
	}

	.goods-text text {
		font-size: 25upx;
		color: #909399;
		text-decoration: line-through;
	}

	.goods-text {
		font-size: 30upx;
	}

	.goods-content {
		display: flex;
		padding: 20upx 20upx;
	}

	.goods-section {
		width: 100%;
		padding: 20upx 0;
		border-top: 20upx solid #F2F6FC;
		border-bottom: 20upx solid #F2F6FC;
	}

	.goods-section image {
		width: 150upx;
		height: 150upx;
	}

	.location {
		width: 100%;
	}

	.address-image image {
		width: 100%;
		height: 8upx;
		display: inline-block;
	}

	.location_nav {
		width: 90%;
		display: flex;
		justify-content: space-between;
		margin: 20upx auto;
		margin-bottom: 0px;
	}

	.location_text {
		width: 100% !important;
	}

	.location_text1 {
		font-size: 30upx;
	}

	.location_text1 text {
		padding-right: 30upx;
	}

	.location_text2 {
		padding: 10upx 0px;
	}

	.location_text2 text {
		padding-right: 30upx;
	}

	.location_img image {
		width: 50upx;
		height: 50upx;
	}
</style>
